import { useState } from 'react';
import { Button, Space, Form, Row, Col, Table } from 'antd';
import { PAGINATION_CONFIG } from '@/constants';
import type { QueryEvcsListParams, Evcs } from './services';
import { queryList } from './services'
import { useRequest } from 'ahooks';
import type { ColumnsType } from 'antd/es/table/interface';
import dayjs from 'dayjs';
import SetRateModal from './components/SetRateModal';
import StationListModal from './components/StationListModal';

const EvcsPage: React.FC<RoutePageProps> = () => {
  const [searchForm] = Form.useForm<QueryEvcsListParams>()
  const [searchParams, setSearchParams] = useState<QueryEvcsListParams>({
    pageNum: 1, pageSize: 10,
  })
  const list = useRequest(() => queryList(searchParams), {
    refreshDeps: [searchParams],
  })
  const [setModalRecord, setSetModalRecord] = useState<Evcs>()
  const [stationListModalRecord, setStationListModalRecord] = useState<Evcs>()

  const onFinish = (formValues: any) => {
    setSearchParams({
      ...searchParams,
      pageNum: 1,
    })
  }

  const openSetRateModal = (record: Evcs) => {
    setSetModalRecord(record)
  }
  const closeSetRateModal = (refresh: boolean) => {
    if (refresh) list.refresh()
    setSetModalRecord(undefined)
  }
  const openStationListModal = (record: Evcs) => {
    setStationListModalRecord(record)
  }
  const closeStationListModal = () => {
    setStationListModalRecord(undefined)
  }

  const columns: ColumnsType<Evcs> = [
    {
      title: '平台ID',
      dataIndex: 'orgId',
    },
    {
      title: '平台名称',
      dataIndex: 'orgName',
    },
    {
      title: '接口版本',
      dataIndex: 'version',
      render: val => val || '--'
    },
    {
      title: '推送服务费比例',
      dataIndex: 'feeModify',
      width: 200,
      render: val => val || '--'
    },
    {
      title: '创建时间',
      dataIndex: 'createTime',
      render: val => val ? dayjs(val).format('YYYY-MM-DD HH:mm:ss') : '--',
    },
    {
      title: '更新时间',
      dataIndex: 'modifyTime',
      render: val => val ? dayjs(val).format('YYYY-MM-DD HH:mm:ss') : '--',
    },
    {
      title: '操作',
      key: 'operation',
      fixed: 'right',
      render: (_, record) => {
        return <Space>
          <a onClick={() => openSetRateModal(record)}>设置比例</a>
          <a onClick={() => openStationListModal(record)}>电站列表</a>
        </Space>
      }
    },
  ]
  
  return (
    <div className='container'>
      <div className="card search-card">
        <div className="form-area">
          <Form name='searchEvcsForm' form={searchForm} onFinish={onFinish}>
            <Row gutter={[20, 20]}>
              <Col span={6}>
                <Space>
                  <Button type='primary' htmlType='submit' loading={list.loading}>筛选</Button>
                  {/* <Button htmlType='reset'>重置</Button> */}
                </Space>
              </Col>
            </Row>
          </Form>
        </div>
      </div>
      <div className="card content-card">
        <Table<Evcs>
          rowKey='orgId'
          loading={list.loading}
          dataSource={list.data?.data}
          columns={columns}
          scroll={{y: 700, x: 'max-content'}}
          pagination={{
            ...PAGINATION_CONFIG,
            current: searchParams.pageNum,
            pageSize: searchParams.pageSize,
            total: list.data?.totalCount || 0,
            onChange: (page, pageSize) => {
              setSearchParams({
                ...searchParams,
                pageNum: page === searchParams.pageNum ? 1 : page,
                pageSize,
              })
            }
          }}
        />
      </div>
      <SetRateModal
        record={setModalRecord}
        onCancel={closeSetRateModal}
      />
      <StationListModal
        record={stationListModalRecord}
        onCancel={closeStationListModal}
      />
    </div>
  );
};

export default EvcsPage;
